<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
    <title>触摸事件</title>
    <style>
           a{
                display: block;
                height: 100px;
                background: cornflowerblue;
                border: 10px solid #d8505c;
                transition: all 3s .2s;
           }

           a:hover{
                 font-size: 100px;
           }
    </style>
</head>
<body>
        <!--
            touch  触摸开始
                   在当前元素上面触摸移动
                   触摸结束
        -->
        <a href="#">哈哈哈</a>
        <script>
                var a=document.querySelector("a");
                /*
                  这里存放的是我们的触摸点

                * 1:changedTouches
                 *2:targetTouches
                 *3:touches
                * */
                /*触摸开始的事件*/
                a.addEventListener("touchstart",function(event){
                     console.log("触摸开始的时候触发");
                     console.log(event);
                });
                /*触摸移动的事件*/
                a.addEventListener("touchmove",function(event){
                      console.log("触摸移动的时候触发");
                    console.log(event);
                });
                /*触摸移动的事件*/
                a.addEventListener("touchend",function(event){
                     console.log("触摸结束的时候触发")
                    console.log(event);
                });

                /*
                * 我们在css3 里面动画， transition  animation
                * 我们有一个过度结束事件
                * transitionEnd  事件有兼容性。
                * */
                a.addEventListener("transitionEnd",function(){
                        console.log("过度结束之后触发");
                });

                /*
                * 处理兼容性
                * */
                a.addEventListener("webkitTransitionEnd",function(){
                       console.log("过度结束之后触发");
                });


        </script>
</body>
</html>